<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inula Request Interceptor Test</title>
    <link rel="stylesheet" type="text/css" href="interceptorStyles.css">
</head>
<body>
<header>Inula Request interceptor Test</header>
<h2>使用拦截器：</h2>
<div class="response-container">
    <h3>响应状态码：</h3>
    <div class="pre-container">
        <pre id="responseStatusWithInterceptor">等待发送请求...</pre>
    </div>
    <h3>请求拦截反馈：</h3>
    <div class="pre-container">
        <pre id="requestInterceptorFeedback">等待发送请求...</pre>
    </div>
    <h3>响应拦截反馈：</h3>
    <div class="pre-container">
        <pre id="responseInterceptorFeedback">等待发送请求...</pre>
    </div>
    <h3>响应数据：</h3>
    <div class="pre-container">
        <pre id="responseDataWithInterceptor">等待发送请求...</pre>
    </div>
    <div class="button">
        <button id="sendRequestWithInterceptor">发送请求</button>
    </div>
</div>

<h2>不使用拦截器：</h2>
<div class="response-container">
    <h3>响应状态码：</h3>
    <div class="pre-container">
        <pre id="responseStatusWithoutInterceptor">等待发送请求...</pre>
    </div>
    <h3>拦截反馈：</h3>
    <div class="pre-container">
        <pre id="noInterceptorFeedback">等待发送请求...</pre>
    </div>
    <h3>响应数据：</h3>
    <div class="pre-container">
        <pre id="responseDataWithoutInterceptor">等待发送请求...</pre>
    </div>
    <div class="button">
        <button id="sendRequestWithoutInterceptor">发送请求</button>
    </div>
</div>

<script src="../../dist/bundle.js"></script>

<script>
  // 创建使用拦截器的 IR 实例
  const irInstance = inulaRequest.create();

  // 添加请求拦截器
  irInstance.interceptors.request.use(function(config) {
    // 为请求添加自定义请求头
    config.headers['IR-Custom-Header'] = 'CustomHeaderValue';
    document.getElementById('requestInterceptorFeedback').textContent = '请求已拦截，并添加请求头IR-Custom-Header';
    return config;
  }, function(error) {
    return Promise.reject(error);
  });

  // 添加响应拦截器
  irInstance.interceptors.response.use(function(response) {
    // 更新响应状态码
    response.status = 404;
    document.getElementById('responseStatusWithInterceptor').textContent = String(response.status);
    document.getElementById('responseInterceptorFeedback').textContent = '响应已被拦截，状态响应码被强制修改成404'
    return response;
  }, function(error) {
    return Promise.reject(error);
  });

  // 使用拦截器的请求
  document.getElementById('sendRequestWithInterceptor').addEventListener('click', function () {
    irInstance.get('http://localhost:3001/')
      .then(function (response) {
        document.getElementById('responseDataWithInterceptor').textContent = JSON.stringify(response.data, null, 2);
    }).catch(function (error) {
      document.getElementById('responseDataWithInterceptor').textContent = 'Request failed:' + error;
    })
  });

  // 不使用拦截器的请求
  document.getElementById('sendRequestWithoutInterceptor').addEventListener('click', function () {
    inulaRequest.get('http://localhost:3001/')
      .then(function (response) {
        document.getElementById('responseStatusWithoutInterceptor').textContent = response.status;
        document.getElementById('responseDataWithoutInterceptor').textContent = JSON.stringify(response.data, null, 2);
        document.getElementById('noInterceptorFeedback').textContent = '请求未被拦截';
    }).catch(function (error) {
      document.getElementById('responseDataWithoutInterceptor').textContent = 'Request failed:' + error;
    })
  });
</script>

</body>
</html>
